<template>
  <div>
      <heads class="HeadTop1">
        <i @click="zhu1()"></i>
        <span>客服中心</span>
        <em>人工服务</em>
      </heads>
      <mains>
          <div class="kefu">
              <div class="kefu-top">
                  <h3>{{dTimer1}}:{{dTimer2}}</h3>
                  <p @click="timer()">机器人为您服务</p>
              </div>
              <div class="kefu-cont">
                  <template>
                        <div class="kefu-one">
                            <div class="kefu-two">
                                <i></i>
                                <em class="jian"></em>
                                <div>您好，我是机器人小灯。请问有什么可以
            帮助您的？机器人仅做引导，不处理或承
            诺任何售后问题。取消、退货等业务请务
            必找人工客服。多谢配合~</div>
                            </div>
                        </div>
                  </template>
                  <template>
                        <div class="kefu-one1">
                            <div class="kefu-two1 clearfix">
                                <i></i>
                                <em class="jian1"></em>
                                <div>发货时间</div>
                            </div>
                        </div>
                  </template>
              </div>
          </div>


      </mains>
      <div class="main-input">
          <input type="text">
          <span>发送</span>
      </div>

  </div>
</template>

<script>
import Head from '../Head.vue';
import Main from '../Main.vue';
export default {
    name:'Kefu',
    data(){
        return{
            dTimer1:'14',
            dTimer2:'14',
            person:[
                '您好，我是机器人小灯。请问有什么可以帮助您的？机器人仅做引导，不处理或承诺任何售后问题。取消、退货等业务请务必找人工客服。多谢配合~','热门问题','亲，韩国直邮2-3个工作日发货、日本直邮3-5个工作日发货，发货后的配送需要7-14个工作日。'
            ],
            klist:['发货时间','关于保证其问题？','商品是产品吗？']

        }
    },components:{
        'heads':Head,
        'mains':Main,
    },mounted() {
        this.timer();
    },
    methods:{
        zhu1(){
            this.$router.replace('/feedback');
        },
        timer(){
            var dattimer=new Date();
            var Timer1=dattimer.getHours();
            var Timer2=dattimer.getMinutes(); 
             this.dTimer1=Timer1;
            this.dTimer2=Timer2; 
        }
    }

}
</script>

<style  scoped>
/*  */
.main-input{
    width: calc(100% - 4rem);
    margin: 0 2rem;
    position: absolute;
    bottom: 0 ;
    height: 6.8rem;
    font-size: 2.8rem;
    background-color: #fff;
}
.main-input input{
    position: absolute;
    width: calc(100% - 10rem);
    left:0;
    height: 5rem;
    border-bottom: 0.1rem solid #ccc;
}
.main-input span{
    position: absolute;
    right: 0;
    top: calc(50% - 2rem);
    color: #61a7ea;
    background-color: #dfe9ef;
    width: 8rem;
    height: 4rem;
    display: inline-block;
}
/*  */

.kefu{
    width: 100%;
    /* color: #61a7ea; */
}
.kefu-top p{
    height: 4rem;
    width: 24rem;
    line-height: 4rem;
    margin: 0 auto;
    font-size: 3rem;
    color: #808080;
    background-color: #e6e6e6;
}
.kefu-top h3{
    font-size: 2.8rem;
    color: #808080;
    height: 6rem;
    line-height: 6rem;
}
.kefu-cont {
    width: 100%;
    margin-top: 2rem;
    /* background-color: #fff; */
}
.clearfix::after{
    content: '';
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}
.clearfix{
    *zoom: 1;
}
/* 客服 */
.kefu-cont .kefu-one{
    width: 100%;
    /* background-color: #fff; */
    padding-top: 6rem;
    position: relative;
}
.kefu-two{
    font-size: 2.8rem;
    color: #4c4c4c;
    /* background-color: #dfe9ef; */
    padding: 1.6rem ;
    text-align: left;
    width: calc(100% - 20.4rem);
    margin-left: 12rem;
    margin-bottom: 2.2rem;
}
.kefu-two i{
    position: absolute;
    top: 0;
    left: 2rem;
    height: 8rem;
    width: 8rem;
    /* outline: #808080 0.1rem solid; */
    background: url(../../../assets/user/geren1.png) no-repeat 0 0;
}
.kefu-two em.jian{
    position: absolute;
    top: 6rem;
    left: 9rem;
    height: 8rem;
    width: 3.4rem;
    background: url(../../../assets/user/blue.png) no-repeat 0 0;
}
/* 用户 */
.kefu-one1{
    width: 100%;
    /* background-color: #f0f; */
    padding-top: 6rem;
    position: relative;
    /* display: flex; */
}
.kefu-two1 {
    font-size: 2.8rem;
    color: #4c4c4c;
}
.kefu-two1 div{
    float: right;
    margin-right: 14rem;
    margin-top: -6rem;
    background-color: #61a7ea;
    padding: 4rem ;
    text-align: right;
    margin-bottom: 2.2rem;
    color: #fff;
}
.kefu-two1 i{
    position: absolute;
    top: 3.6rem;
    right: 2rem;
    height: 8rem;
    width: 8rem;
    background: url(../../../assets/user/geren2.png) no-repeat 0 0;
}
.kefu-two1 em.jian1{
    position: absolute;
    top: 0;
    right: 11rem;
    height: 8rem;
    width: 3.4rem;
    background: url(../../../assets/user/blue2.png) no-repeat 0 0;
}
/* 公用 */
.Mainbox{
    font-size: 0;
}
.HeadTop1 i:nth-child(1){
    height: 3.8rem;
    width: 3.8rem;
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-1.9rem);
    background: url(../../../assets/user/user-wback.png) no-repeat 0 0;
}
.HeadTop1 em{
    height: 9.6rem;
    line-height: 9.6rem;
    position: absolute;
    right: 2rem;
    top: 0;
    font-size: 3rem;
}
</style>